{% extends 'ApplicationToolsBundle::layout12.html.twig' %}

{% block title %}Slider Simple Animation{% endblock %}

{% block stylesheets %}
    <link href="{{ asset('bundles/applicationtools/css/sequence/sequence-horizontal-parallax.css') }}" rel="stylesheet" type="text/css" media="all" />
{% endblock %}

{% block javascripts %}
    <script src="{{ asset('bundles/applicationtools/js/sequence/jquery.sequence.js') }}" type="text/javascript"></script>
    <script src="{{ asset('bundles/applicationtools/js/sequence/sequence-horizontal-parallax.js') }}" type="text/javascript"></script>
{% endblock %}
    
{% block body %}

		<div class="sequence-theme">
			<div id="sequence">
				<img class="sequence-prev" src="{{ asset('bundles/applicationtools/images/sequence/horizontal-parallax/bt-prev.png') }}" alt="Previous" />
				<img class="sequence-next" src="{{ asset('bundles/applicationtools/images/sequence/horizontal-parallax/bt-next.png') }}" alt="Next" />
	
				<ul class="sequence-canvas">
					<li class="animate-in">
						<div class="info">
							<h2>Built using Sequence.js</h2>
							<p>The Responsive Slider with Advanced CSS3 Transitions</p>
						</div>
						<img class="sky" src="{{ asset('bundles/applicationtools/images/sequence/horizontal-parallax/bg-clouds.png') }}" alt="Blue Sky" />
						<img class="balloon" src="{{ asset('bundles/applicationtools/images/sequence/horizontal-parallax/balloon.png') }}" alt="Balloon" />
					</li>
					<li>
						<div class="info">
							<h2>Creative Control</h2>
							<p>Create unique sliders using CSS3 transitions -- no jQuery knowledge required!</p>
						</div>
						<img class="sky" src="{{ asset('bundles/applicationtools/images/sequence/horizontal-parallax/bg-clouds.png') }}" alt="Blue Sky" />
						<img class="aeroplane" src="{{ asset('bundles/applicationtools/images/sequence/horizontal-parallax/aeroplane.png') }}" alt="Aeroplane" />
					</li>
					<li>
						<div class="info">
							<h2>Cutting Edge</h2>
							<p>Supports modern browsers, old browsers (IE7+), touch devices and responsive designs</p>
						</div>
						<img class="sky" src="{{ asset('bundles/applicationtools/images/sequence/horizontal-parallax/bg-clouds.png') }}" alt="Blue Sky" />
						<img class="kite" src="{{ asset('bundles/applicationtools/images/sequence/horizontal-parallax/kite.png') }}" alt="Kite" />
					</li>
				</ul>
			</div>
		</div>

{% endblock %}